<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="hotelName">
        <el-input
          v-model.trim="list.filter.hotelName"
          placeholder="酒店名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="roomName">
        <el-input
          v-model.trim="list.filter.roomName"
          placeholder="房型名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="() => { $refs.listFilterRef.resetFields() }">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <!-- <auth-button
          @click="exportExcel()"
          :loading="exportListLoading"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/meituanRoom/export"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="房型名称" prop="roomName" />
      <el-table-column label="床型" prop="roomBedInfo">
        <template slot-scope="{ row }">
          <span v-for="(item, index) in row.roomBedInfo" :key="index">
            <span v-for="(its, idx) in item" :key="idx">{{ its.bedType }}</span>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="面积" prop="useableArea" />
      <el-table-column label="所在楼层" prop="floor" />
      <el-table-column label="是否有窗" prop="windowName">
        <!-- <template slot-scope="{row }">
          <span v-if="row.windowName==0">有</span>
          <span v-if="row.windowName==1">部分</span>
          <span v-if="row.windowName==2">无</span>
        </template> -->
      </el-table-column>
      <el-table-column label="所属酒店" prop="pointName" />
      <!-- <el-table-column label="来源" prop="携程" /> -->
      <el-table-column label="操作" class-name="small-padding" align="center">
        <template slot-scope="{ row }">
          <auth-button
            @click="()=>{
              row.id = row.roomId;
              r(row);
            }"
            name="查看"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="房型详情"
      :visible.sync="form.show"
      v-if="form.show"
      :close-on-click-modal="false"
      v-loading="form.loading && !form.show"
    >
      <detailMeiTuan :form="form"></detailMeiTuan>
      <div slot="footer" class="dialog-footer">
        <el-button @click="form.show = false"> 关 闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin';
import useAdmateAdapter from '@/utils/useAdmateAdapter';
import detailMeiTuan from "../third-party/room-types/detail/meituan";
export default {
  mixins: [pageMixin],
  components: {
    detailMeiTuan
  },
  computed: {
    ...mapGetters(["areaTree"]),
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/meituanRoom'
  }),
  
  data() {
    return {
      exportListLoading: false,
    };
  },
  methods: {
    // /**
    //  * 导出
    //  */
    // exportExcel() {
    //   if(this.exportListLoading){
    //     return false
    //   }
    //   this.exportListLoading = true;  
    //   this.$POST.download("sot-admin-api/hotel/meituanRoom/export", this.list.filter, {
    //     method: "POST",
    //   }).finally((e) => {
    //     this.exportListLoading = false;
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>